<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/node.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的运动圈</h1>
		</header>

		<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper ">
			<div class="mui-scroll">
				<div id="list">
					<div id="item" style="padding: 10px;border-bottom: 1px solid;border-color: #B5B5B5;background-color: #ffffff;">
						<div>
							<img id="icon" src="../../images/001/icon.jpg " width="60px" height="60px" align="left" style="margin-right: 10px;" />
							<div style="float: right;" id="icons">
								<img src="../../icon/circle/1.png" width="25px" style="display: none;" />
								<img src="../../icon/circle/2.png" width="25px" style="display: none;" />
								<img src="../../icon/circle/3.png" width="25px" style="display: none;" />
								<img src="../../icon/circle/4.png" width="25px" style="display: none;" />
								<img src="../../icon/circle/7.png" width="25px" style="display: none;" />
								<img src="../../icon/circle/8.png" width="25px" style="display: inline;" />
							</div>
							<div>
								<p id="nickname">篮球火火 </p>
								<p id="title">标题：无兄弟不篮球</p>
							</div>
						</div>
						<div id="" style="min-height: 60px;">
							<img onclick="showMaps();" src="../../icon/minMap.png" width="60px" height="60px" align="right" style="margin-right: 10px;" />
							<p id="msg">每月一度的以球会友杯圆满收官啦，各位老友下个月再见！！</p>
						</div>
						<div>
							<img id="img0" src="../images/001/icon/A1.jpg " width="32%" height=width data-preview-src="" data-preview-group="1" />
							<img id="img1" src="../images/001/icon/B-1.jpg " width="32%" height=width data-preview-src="" data-preview-group="1" />
							<img id="img2" src="../images/001/icon/C-1.jpg " width="32%" height=width data-preview-src="" data-preview-group="1" />
							<img id="img3" src="../images/001/icon/A1.jpg " width="32%" height=width data-preview-src="" data-preview-group="1" />
							<img id="img4" src="../images/001/icon/B-1.jpg " width="32%" height=width data-preview-src="" data-preview-group="1" />
							<img id="img5" src="../images/001/icon/C-1.jpg " width="32%" height=width data-preview-src="" data-preview-group="1" />
							<img id="img6" src="../images/001/icon/A1.jpg " width="32%" height=width data-preview-src="" data-preview-group="1" />
							<img id="img7" src="../images/001/icon/B-1.jpg " width="32%" height=width data-preview-src="" data-preview-group="1" />
							<img id="img8" src="../images/001/icon/C-1.jpg " width="32%" height=width data-preview-src="" data-preview-group="1" />
						</div>

						<div id="comment" style="padding: 10px ;background-color: #EBEBEB;">
							<div>留言：
								<a id="aa" class="mui-pull-right">更多</a>
							</div>
						</div>

					</div>
				</div>
			</div>

			<div class="mui-off-canvas-backdrop"></div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../json/data2.js"></script>
		<script src="../../js/mui.zoom.js"></script>
		<script src="../../js/mui.previewimage.js"></script>
		<script>
			mui.previewImage();

			mui.init({
				swipeBack: false,

			});

			mui('#offCanvasContentScroll').scroll();

			var list = document.getElementById("list");
			var item = document.getElementById("item");
			item.style.display = 'none';

			for(var j = 0; j < data2.length; j++) {
				var o = data2[j];
				var div = item.cloneNode(true)
				var icon = div.querySelector("#icon");
				var nickname = div.querySelector("#nickname");
				var title = div.querySelector("#title");
				var msg = div.querySelector("#msg");
				var comment = div.querySelector("#comment");
				var imgs = o.img;
				for(var i = 0; i < 9; i++) {
					var img = div.querySelector("#img" + i);
					if(imgs[i]) {
						img.src = "../" + imgs[i];
						//img.data-preview-group=o.id;
					} else {
						img.remove();
					}
				}
				var rows = 3;
				for(var i = 0; i < o.comment.length; i++) {
					var p = document.createElement("p");
					p.style.lineHeight = "90%";
					p.style.fontSize = "12px;"
					if(i >= rows) {
						p.style.display = "none";
					}
					p.textContent = o.comment[i];
					comment.appendChild(p);
				}
				msg.textContent = o.msg;
				icon.src = "../" + o.iconSrc;
				nickname.textContent = o.nickname;
				title.textContent = "标题：" + o.title;
				div.style.display = 'inherit';
				var aa = div.querySelector("#aa");
				aa.addEventListener("tap", function() {
					var nodes = this.parentNode.parentNode.querySelectorAll("p");
					for(var i = rows + 1; i < nodes.length; i++) {
						nodes[i].style.display = nodes[i].style.display == "none" ? "inherit" : "none";
					}
				});

				var icons = div.querySelector("#icons").querySelectorAll("img");
				icons[4].addEventListener("tap", function() {
					var nodes = this.parentNode.querySelectorAll("img");
					for(var i = 0; i < nodes.length; i++) {
						nodes[i].style.display = (i == 5 ? "inline" : "none");
					}
				});
				icons[5].addEventListener("tap", function() {
					var nodes = this.parentNode.querySelectorAll("img");
					for(var i = 0; i < nodes.length; i++) {
						nodes[i].style.display = (i == 5 ? "none" : "inline");
					}
				});

				list.appendChild(div);

			}
		</script>
	</body>

</html>